<template>
	<view class="logout">
		<view class="img-box">
			<image src="/static/icon/mine/worring.png" class="img" />
		</view>
		<view class="tips"> 账号注销后，将无法恢复以下资产和权益 </view>
		<view class="intro" v-html="tips"> </view>
		<view class="btn-box">
			<view class="btn" @tap="cancel"> 取消申请 </view>
			<view class="btn" @tap="modalRef.open()"> 确认注销 </view>
		</view>
		<Modal ref="modalRef" tips="是否要注销该账号？" @confirm="submit"/>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import Modal from '@/components/Modal.vue'
	import { useCommStore, useUserStore } from '@/store/index.js'
	import { LogoutApi } from '@/service/index.js'
	const modalRef = ref()
	const tips = computed(() => {
		const { comm } = useCommStore()
		return comm.logout_msg
	})
	// 取消申请
	const cancel = () => {
		uni.navigateBack()
	}
	// 确认注销
	const submit = () => {
		const { LOGOUT } = useUserStore()
		LogoutApi().then(() => {
			LOGOUT()
			modalRef.value.close()
			uni.redirectTo({
				url: '/pages/index/index'
			})
		})
	}
</script>

<style lang="scss" scoped>
	.logout {
		width: 100%;
		padding: 38px 12px 30px;
		border-radius: 10px;
		background-color: #fff;
		box-sizing: border-box;
		.img-box {
			text-align: center;
			.img {
				width: 54px;
				height: 66px;
			}
		}
		.tips {
			color: #333333;
			font-size: 16px;
			font-weight: 500;
			line-height: 20px;
			text-align: center;
			padding: 30px 0 15px 0;
			border-bottom: #EEEEEE 1px solid;
		}
		.intro { }
		.btn-box {
			margin-top: 40px;
			display: flex;
			justify-content: center;
			.btn {
				width: 120px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FF3B1E;
				font-size: 16px;
				font-weight: 400;
				border-radius: 99px;
				border: 1px solid #FF3B1E;
				&:nth-last-of-type(1) {
					border: 0;
					color: #FFFFFF;
					background: #FF3B1E;
					margin-left: 48px;
				}
			}
		}
	}
</style>